<template>
    <div>
        <h1>{{title}}</h1>
        <!-- 难点 v-model下组件传递问题 -->
        <Add  v-model="inputText"  @keydown.enter="AddFun"  placeholder="New todo"></Add>
        <ul>
            <!-- :todo父组件传递到子组件  @remove子组件传递父组件事件 -->
            <ToDoList  v-for="todo in todoList" :key="todo.id" :todo="todo" @remove="removeTodo"></ToDoList>
        </ul>
        
    </div>
    
</template>

<script>
// import func from '../vue-temp/vue-editor-bridge'
import Add from "./components/Add.vue"
import ToDoList from './components/todoList.vue'
let todoId = 0
export default {
    name:"App",
    data(){
        return {
            title:"My Todo App!",
            inputText:"",
            todoList:[
                {id:todoId++,name:"Learn Vue"},
                {id:todoId++,name:"Learn about single-file component"},
                {id:todoId++,name:"Learn webpack"}
            ]
        }  
    },
    components:{
        Add,ToDoList
    },
    methods:{
        AddFun:function(){
            console.log(2,this.inputText)
            let content = this.inputText.trim()
            if(!!content){
                this.todoList.push({
                    id:todoId++,
                    name:content
                })
                this.inputText = ""
            }  
        },
        removeTodo(id){
            this.todoList = this.todoList.filter(function(item){
                return item.id !=id
            })
        }
    }
}
</script>

<style scoped>
   h1{
       text-align: center;
   }
    ul{
        width:400px;
        overflow: hidden;
        margin: 0 auto;
        color:gray;
    }
</style>